<script setup lang="ts">
import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
// console.log(router, "router");
// console.log(route, "route");
console.log(import.meta.env);
</script>

<template>
  <div id="app">
    <aside>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/ref">Ref</RouterLink>
      <RouterLink to="/isRef">isRef</RouterLink>
      <RouterLink to="/shallowRef">shallowRef</RouterLink>
      <RouterLink to="/toRef">toRef</RouterLink>
      <RouterLink to="/toRefs">toRefs</RouterLink>
      <RouterLink to="/toRaw">toRaw</RouterLink>
      <RouterLink to="/computed">computed</RouterLink>
      <RouterLink to="/watch">watch</RouterLink>
      <RouterLink to="/watchEffect">watchEffect</RouterLink>
      <RouterLink to="/template">Template</RouterLink>
      <RouterLink to="/lifeCycle">LifeCycle</RouterLink>
      <RouterLink to="/props">父子组件传参</RouterLink>
      <RouterLink to="/parent">兄弟组件传参</RouterLink>
      <RouterLink to="/eventBus">Event Bus实现兄弟组件传参</RouterLink>
      <RouterLink to="/vmodeParent">V-model实现组件传参</RouterLink>
      <RouterLink to="/component">动态组件</RouterLink>
      <RouterLink to="/asyncComponent">异步组件</RouterLink>
      <RouterLink to="/transition">transition组件</RouterLink>
      <RouterLink to="/transitionGroup">transitionGroup组件</RouterLink>
      <RouterLink to="/keepAlive">keepAlive组件</RouterLink>
      <RouterLink to="/teleport">teleport组件</RouterLink>
      <RouterLink to="/recurtionComponent">递归组件</RouterLink>
      <RouterLink to="/myMixins">组件混入</RouterLink>
      <RouterLink to="/extends">组件继承</RouterLink>
      <RouterLink to="/h">h函数</RouterLink>
      <RouterLink to="/jsx">jsx</RouterLink>
      <RouterLink to="/directives">自定义指令</RouterLink>
      <RouterLink to="/plugins">插件</RouterLink>
      <RouterLink to="/scoped">样式scoped</RouterLink>
      <RouterLink to="/class">动态class</RouterLink>
      <RouterLink to="/style">动态style</RouterLink>
      <RouterLink to="/vModel">深入v-model</RouterLink>
      <RouterLink to="/pinia">pinia</RouterLink>
      <RouterLink to="/hooks">自定义hooks</RouterLink>
      <RouterLink to="/nextTick">nextTick</RouterLink>
      <RouterLink to="/tailWindCss">tailWindCss</RouterLink>
    </aside>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="route?.meta?.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!route?.meta?.keepAlive" />
    </router-view>
  </div>
</template>

<style scoped lang="scss">
a {
  display: block;
  width: 100%;
}
</style>
